// // import { Button, Form, Input } from 'antd';
// // import { LockOutlined } from '@ant-design/icons';
// // import React from 'react';
// //
// // class AddUser extends Comment{
// //   constructor(props) {
// //     super(props);
// //   }
// //
// //   render(){
// //     return(
// //       <div>
// //         <h1>新增部门</h1>
// //         <Form layout="vertical">
// //           <Form.Item
// //             label="部门名称"
// //             required
// //           >
// //             <Input
// //               value={this.state.deptName}
// //               onChange={this.handleInputChange}
// //               placeholder="请输入部门名称"
// //             />
// //           </Form.Item>
// //           <Form.Item>
// //             <Button type="primary" onClick={this.handleSubmit}>
// //               提交
// //             </Button>
// //           </Form.Item>
// //         </Form>
// //       </div>
// //     )
// //
// //   }
// //
// //
// // }
// // export default AddUser;
// import React from 'react';
// import { Form, Input, Button, message } from 'antd';
//
// class AddUser extends React.Component {
//   constructor(props) {
//     super(props);
//     this.state = {
//       userId: '',
//       username: '',
//       nickname: '',
//       userSex: '',
//       userDeptName: '',
//       userDeptId: '',
//     };
//   }
//
//   handleInputChange = (e) => {
//     const { name, value } = e.target;
//     this.setState({
//       [name]: value,
//     });
//   };
//
//   handleSubmit = () => {
//     this.props.form.validateFields()
//       .then(() => {
//         const data = {
//           userId: this.state.userId,
//           username: this.state.username,
//           nickname: this.state.nickname,
//           userSex: this.state.userSex,
//           userDeptName: this.state.userDeptName,
//           userDeptId: this.state.userDeptId,
//         };
//
//         const url = 'http://127.0.0.1:8089/user';
//
//         fetch(url, {
//           method: 'POST',
//           headers: {
//             'Content-Type': 'application/json',
//             Authorization: localStorage.getItem('Authorization')
//           },
//           body: JSON.stringify(data),
//         })
//           .then(response => {
//             if (response.ok) {
//               return response.json();
//             }
//             throw new Error('Network response was not ok.');
//           })
//           .then(data => {
//             console.log('Success:', data);
//             message.success('部门创建成功！');
//             this.props.form.resetFields(); // 重置表单
//             this.props.onClose(); // 假设你有一个 onClose 属性来关闭模态框
//           })
//           .catch((error) => {
//             console.error('Error:', error);
//             message.error(`部门创建失败：${error.message}`);
//           });
//       })
//       .catch(errorInfo => {
//         message.error('请填写所有必填项');
//       });
//   };
//
//   render() {
//     return (
//       <div>
//         <Form layout="vertical">
//           <Form.Item
//             name="userId"
//             label="用户ID"
//             rlules={[
//               {
//                 required: true,
//                 message: '请输入用户ID',
//               },
//             ]}
//           >
//             <Input
//               value={this.state.deptName}
//               onChange={this.handleInputChange}
//               placeholder="请输入用户ID"
//             />
//           </Form.Item>
//           <Form.Item
//             label="用户名"
//             name="username"
//             rules={[
//               {
//                 required: true,
//                 message: '请输入用户名',
//               },
//             ]}
//           >
//             <Input
//               value={this.state.deptName}
//               onChange={this.handleInputChange}
//               placeholder="请输入用户名"
//             />
//           </Form.Item>
//           <Form.Item
//             label="昵称"
//             name="nickname"
//             rules={[
//               {
//                 required: false,
//               },
//             ]}
//           >
//             <Input
//               value={this.state.deptName}
//               onChange={this.handleInputChange}
//               placeholder="请输入昵称"
//             />
//           </Form.Item>
//           <Form.Item
//             label="性别"
//             name="userSex"
//             rules={[
//               {
//                 required: false,
//               },
//             ]}
//           >
//             <Input
//               value={this.state.deptName}
//               onChange={this.handleInputChange}
//               placeholder="性别"
//             />
//           </Form.Item>
//           <Form.Item
//             label="部门"
//             name="userDeptName"
//             rules={[
//               {
//                 required: true,
//                 message: '请输入部门名称',
//               },
//             ]}
//
//           >
//             <Input
//               value={this.state.deptName}
//               onChange={this.handleInputChange}
//               placeholder="请输入部门名称"
//             />
//           </Form.Item>
//           <Form.Item
//             label="部门编号"
//             name="userDeptId"
//             rules={[
//               {
//                 required: false,
//               },
//             ]}
//           >
//             <Input
//               value={this.state.deptName}
//               onChange={this.handleInputChange}
//               placeholder="请输入部门编号"
//             />
//           </Form.Item>
//           <Form.Item>
//             <Button type="primary" onClick={this.handleSubmit}>
//               提交
//             </Button>
//           </Form.Item>
//         </Form>
//       </div>
//     );
//   }
// }
//
// export default AddUser;
import React from 'react';
import { Form, Input, Button, message } from 'antd';

class AddUser extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      userId: '',
      username: '',
      nickname: '',
      userSex: '',
      userDeptName: '',
      userDeptId: '',
    };
  }

  handleInputChange = (e) => {
    this.setState({
      [e.target.name]: e.target.value,
    });
  };

  handleSubmit = () => {
    const { userId, username, userDeptName } = this.state;
    const url = 'http://127.0.0.1:8089/user';

    const data = {
      userId,
      username,
      nickname: this.state.nickname,
      userSex: this.state.userSex,
      userDeptName,
      userDeptId: this.state.userDeptId,
    };
    // eslint-disable-next-line no-restricted-syntax
    for (const key in data) {
      if (!data[key].trim()) { // 使用 trim() 去除前后空格后检查是否为空
        message.error(`${key}不能为空`);
        return; // 遇到空值就停止执行
      }
    }

    fetch(url, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        Authorization: localStorage.getItem('Authorization')
      },
      body: JSON.stringify(data),
    })
      .then(response => {
        if (response.ok) {
          return response.json();
        }
        throw new Error('Network response was not ok.');
      })
      .then(data => {
        message.success('用户创建成功！');
      })
      .catch((error) => {
        message.error(`用户创建失败：${error.message}`);
      });
  };

  render() {
    return (
      <div>
        <Form layout="vertical">
          <Form.Item
            name="userId"
            label="用户ID"
            rules={[
              { required: true, message: '请输入用户ID' },
              { pattern: /^[1-9].{5,11}$/, message: 'ID长度必须是6-12位且不可以是0开头的数字' }
            ]}
          >
            <Input
              name="userId"
              value={this.state.userId}
              onChange={this.handleInputChange}
              placeholder="请输入用户ID"
            />
          </Form.Item>
          <Form.Item
            name="username"
            label="用户名"
            rules={[{ required: true, message: '请输入用户名' }]}
          >
            <Input
              name="username"
              value={this.state.username}
              onChange={this.handleInputChange}
              placeholder="请输入用户名"
            />
          </Form.Item>
          <Form.Item
            name="nickname"
            label="昵称"
            rules={[{ required: true,message: '请输入昵称'}]}
          >
            <Input
              name="nickname"
              value={this.state.nickname}
              onChange={this.handleInputChange}
              placeholder="请输入昵称"
            />
          </Form.Item>
          <Form.Item
            name="userSex"
            label="性别"
            rules={[
              { required: true, message: '请输入性别' },
              { pattern: /^(男|女)$/, message: '性别只能是男或女' }
            ]}
          >
            <Input
              name="userSex"
              value={this.state.userSex}
              onChange={this.handleInputChange}
              placeholder="性别"
            />
          </Form.Item>
          <Form.Item
            name="userDeptName"
            label="部门"
            rules={[{ required: true, message: '请输入部门名称' }]}
          >
            <Input
              name="userDeptName"
              value={this.state.userDeptName}
              onChange={this.handleInputChange}
              placeholder="请输入部门名称"
            />
          </Form.Item>
          <Form.Item
            name="userDeptId"
            label="部门编号"
            rules={[
              { required: true, message: '请输入部门编号'},
              { enum: ['101', '202', '303', '404'], message: '部门编号只能是101、202、303、404' }
            ]}
          >
            <Input
              name="userDeptId"
              value={this.state.userDeptId}
              onChange={this.handleInputChange}
              placeholder="请输入部门编号"
            />
          </Form.Item>
          <Form.Item>
            <Button type="primary" onClick={this.handleSubmit}>
              提交
            </Button>
          </Form.Item>
        </Form>
      </div>
    );
  }
}

export default AddUser;
